let id = location.href.split('?')[1].split('=')[1]
function render(method,url){
    return new Promise((resolve,reject)=>{
        let xhr = new XMLHttpRequest()
        xhr.open(method,url)
        xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4){
            if(xhr.status === 200){
            let data = JSON.parse(xhr.responseText)
            resolve(data)
            }
        }else{
            // reject(xhr)
        }
        }
        if(method.toUpperCase() === 'POST'){
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(JSON.stringify(body))
        }
        else{
        xhr.send()
        }
    })
}
render('get',`http://zyxcl.xyz/music/api/playlist/detail?id=${id}`)
.then(data=>{
    console.log(data)
    let item = data.playlist
    $('.header').style.background = `url(${item.coverImgUrl})`
    $('.header').innerHTML =`<div class="header_left">
                    <img src="${item.coverImgUrl}" alt="">
                    <p><span class="iconfont icon-24gf-headphones"></span>${Math.round(item.playCount/10000)}万</p>
                </div>
                <div class="header_right">
                    <h3>${item.name}</h3>
                </div>`
    $('.content ul').innerHTML = item.tracks.slice(0,20).map((it,i)=>{
        return `<li data-id="${it.id}">
                    <div>
                        <span>${i+1}</span>
                        <div>
                            <strong>${it.name}</strong>
                            <p >${it.ar.map(it=>it.name).join('/')}-${it.al.name}</p>
                        </div>
                    </div>
                    <span class="iconfont icon-bofang"></span>
                </li>`
    }).join('')
    let list = [...document.querySelectorAll('.content ul li')]
    list.forEach(li =>{
        li.addEventListener('click',e=>{
            let id = li.getAttribute('data-id')
            location.href = `./playsong.html?id=${id}`
            console.log(id)
        })
    })
})
.catch(error =>{
    console.log(error)
})
let $ = el=>document.querySelector(el)